"use strict";

$(function () {
    "use strict";

    // 渲染页面

    var goodsConts = $.cookie("goodsConts") ? JSON.parse($.cookie("goodsConts")) : [];
    // console.log(goods)
    if (goodsConts.length == 1) {
        var str = "";
        goodsConts.forEach(function (ind, val) {
            str += "<tr>\n            <td class=\"table-name\">\n             <a href=\"javascript:;\"> \n                 <img src=\"" + goodsConts[val].img + "\" alt=\"\"> \n                <div class=\"product-name\">\n                    <p class=\"item-name\">" + goodsConts[val].name + "</p>\n                    <p class=\"item-desc\">" + goodsConts[val].desc + "</p>\n                </div>\n            </a>\n        </td>\n            <td class=\"table-price\">" + goodsConts[val].price + "</td>\n            <td class=\"table-num\">" + goodsConts[val].num + "</td>\n            <td class=\"table-total\">\uFFE5" + parseInt(goodsConts[val].price.replace('￥', '')) * goodsConts[val].num + ".00</td>\n            <td class=\"table-express\" rowspan=\"999\">\n                \u5FEB\u9012\u914D\u9001\uFF1A\u8FD0\u8D39<span class=\"red\">\uFFE50.00</span>\n            </td>\n        </tr>";
        });
        $("tbody").html(str);
    }
    if (goodsConts.length > 1) {
        // console.log(goods[0])
        var title = "";
        var str = "";
        var total = "";
        title = "<tr>\n        <td class=\"table-name\">\n         <a href=\"javascript:;\"> \n             <img src=\"" + goodsConts[0].img + "\" alt=\"\"> \n            <div class=\"product-name\">\n                <p class=\"item-name\">" + goodsConts[0].name + "</p>\n                <p class=\"item-desc\">" + goodsConts[0].desc + "</p>\n            </div>\n        </a>\n    </td>\n        <td class=\"table-price\">" + goodsConts[0].price + "</td>\n        <td class=\"table-num\">" + goodsConts[0].num + "</td>\n        <td class=\"table-total\">\uFFE5" + parseInt(goodsConts[0].price.replace('￥', '')) * goodsConts[0].num + ".00</td>\n        <td class=\"table-express\" rowspan=\"999\">\n            \u5FEB\u9012\u914D\u9001\uFF1A\u8FD0\u8D39<span class=\"red\">\uFFE50.00</span>\n        </td>\n    </tr>";
        // console.log(goods.slice(1))
        var arr = goodsConts.slice(1);
        arr.forEach(function (ind, val) {
            str += "<tr>\n            <td class=\"table-name\">\n             <a href=\"javascript:;\"> \n                 <img src=\"" + arr[val].img + "\" alt=\"\"> \n                <div class=\"product-name\">\n                    <p class=\"item-name\">" + arr[val].name + "</p>\n                    <p class=\"item-desc\">" + arr[val].desc + "</p>\n                </div>\n            </a>\n        </td>\n            <td class=\"table-price\">" + arr[val].price + "</td>\n            <td class=\"table-num\">" + arr[val].num + "</td>\n            <td class=\"table-total\">\uFFE5" + parseInt(arr[val].price.replace('￥', '')) * arr[val].num + ".00</td>\n        </tr>";
        });
        total = title + str;
        $("tbody").html(total);
    }

    // 计算总价
    var sumPrice = 0;
    $("tbody tr").each(function (ind, val) {
        sumPrice += parseInt($(val).find(".table-total").html().replace('￥', ''));
        $.cookie("TotalPrice", sumPrice);
    });
    $(".product-totalPrice").html("￥" + sumPrice + ".00");
    $(".order-total-price").html("￥" + sumPrice + ".00");

    // 选择支付
    $(".order-pay-list li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(this).addClass("active").parent().parent().siblings().find(".order-pay-list li").removeClass("active");
    });

    // 地址操作
    $("#sjld").sjld("#shenfen", "#chengshi", "#quyu");

    // 添加地址框出现和隐藏
    $(".add").click(function () {
        $(".mask1").show();
    });
    $(".adder-close").click(function () {
        $(".mz-mask").hide();
    });
    $(".btn-cancel").click(function () {
        $(".mz-mask").hide();
    });

    // 点击确定时 将输入框的中内容渲染到页面中
    var address = $.cookie("address") ? JSON.parse($.cookie("address")) : [];
    $(".mask1 .btn-success").click(function () {
        // 存入地址
        var username = $(".mask1 .input-name").val();
        var phone = $(".mask1 .input-phone").val();
        var shenfen = $(".mask1 #shenfen p").html();
        var chengshi = $(".mask1 #chengshi p").html();
        var quyu = $(".mask1 #quyu p").html();
        var detal = $(".mask1 .adder-detal").val();
        var adderCont = $(".mask1 #shenfen p").html() + $(".mask1 #chengshi p").html() + $(".mask1 #quyu p").html() + $(".mask1 .adder-detal").val();

        address.push({
            username: username,
            phone: phone,
            shenfen: shenfen,
            chengshi: chengshi,
            quyu: quyu,
            detal: detal,
            adderCont: adderCont
        });

        $(".mz-mask").hide();
        $.cookie("address", JSON.stringify(address));
        window.location.href = "order.html";
    });

    // console.log(address)
    // 渲染页面
    var address = $.cookie("address") ? JSON.parse($.cookie("address")) : [];
    var addre = "";
    address.forEach(function (ind, val) {
        addre += "<li class=\"address-checkbox checked\">\n        <div class=\"address-checkbox-top\">\n            <div class=\"address-checkbox-name\">" + address[val].username + "</div>\n            <div class=\"address-checkbox-phone\">" + address[val].phone + "</div>\n        </div>\n        <div class=\"address-checkbox-cont\">" + address[val].adderCont + "</div>\n        <div class=\"address-checkbox-checked checked2\">\u221A</div>\n        <div class=\"address-checkbox-ctrl\">\n            <div class=\"address-checkbox-delete\">\u5220\u9664</div>\n            <div class=\"address-checkbox-edit\">\u4FEE\u6539</div>\n        </div>\n    </li>";
    });
    $(".address-list").prepend(addre);

    // 移入时显示按钮
    setTimeout(function () {
        $(".address-checkbox").hover(function () {
            $(this).find(".address-checkbox-ctrl").show();
        }, function () {
            $(this).find(".address-checkbox-ctrl").hide();
        });
    }, 100);

    // 点击删除
    $(".address-checkbox-delete").click(function () {
        $(this).parent().parent().remove();
        var i = $(this).parent().parent().index();
        address.splice(i, 1);
        $.cookie("address", JSON.stringify(address));
        window.location.href = "order.html";
    });
    // 点击修改时出来修改框
    $(".address-checkbox-edit").click(function () {
        $(".mask2").show();
        var i = $(this).parent().parent().index();
        $(".input-name").val(address[i].username);
        $(".input-phone").val(address[i].phone);
        $("#shenfen p").html(address[i].shenfen);
        $("#shenshi p").html(address[i].shenshi);
        $("#quyu p").html(address[i].quyu);
        $(".adder-detal").val(address[i].detal);

        console.log(address);

        $(".mask2 .btn-success").click(function () {
            var username2 = $(".mask2 .input-name").val();
            var phone2 = $(".mask2 .input-phone").val();
            var shenfen2 = $(".mask2 #shenfen p").html();
            var chengshi2 = $(".mask2 #chengshi p").html();
            var quyu2 = $(".mask2 #quyu p").html();
            var detal2 = $(".mask2 .adder-detal").val();
            var adderCont2 = $(".mask2 #shenfen p").html() + $(".mask2 #chengshi p").html() + $(".mask2 #quyu p").html() + $(".mask2 .adder-detal").val();

            address[i] = {
                username: username2,
                phone: phone2,
                shenfen: shenfen2,
                chengshi: chengshi2,
                quyu: quyu2,
                detal: detal2,
                adderCont: adderCont2
            };
            console.log(address);
            $(".mz-mask").hide();
            $.cookie("address", JSON.stringify(address));
            window.location.href = "order.html";
        });
    });

    // 跳转到支付页面
    $(".mz-btn").click(function () {
        window.location.href = "../payment.html";
    });
});